<template>
  <view class="container">
    <!-- 重点工作列表 -->
    <view class="work-list">
      <view class="list-header">
        <text class="list-title">近期重点工作</text>
      </view>
      
      <view class="work-item" v-for="(item, index) in workList" :key="index">
        <view class="item-header">
          <view class="serial-number">序号: {{ item.serial }}</view>
          <view class="work-status" :class="item.status">{{ getStatusText(item.status) }}</view>
        </view>
        
        <view class="item-content">
          <view class="work-title">
            <text class="title-text">{{ item.title }}</text>
          </view>
          
          <view class="work-description">
            <text class="desc-label">工作描述:</text>
            <text class="desc-text">{{ item.description }}</text>
          </view>
          
          <!-- 图片展示 -->
          <view class="work-images" v-if="item.images && item.images.length > 0">
            <text class="images-label">相关图片:</text>
            <view class="image-grid">
              <view class="image-item" v-for="(image, imgIndex) in item.images" :key="imgIndex" @click="previewImage(item.images, imgIndex)">
                <image :src="image" mode="aspectFill" class="work-image" />
              </view>
            </view>
          </view>
          
          <view class="work-details">
            <view class="detail-row">
              <text class="detail-label">负责部门:</text>
              <text class="detail-value">{{ item.department }}</text>
            </view>
            
            <view class="detail-row">
              <text class="detail-label">开始时间:</text>
              <text class="detail-value">{{ item.startTime }}</text>
            </view>
            
            <view class="detail-row">
              <text class="detail-label">预计完成:</text>
              <text class="detail-value">{{ item.endTime }}</text>
            </view>
            
            <view class="detail-row" v-if="item.progress">
              <text class="detail-label">完成进度:</text>
              <view class="progress-bar">
                <view class="progress-fill" :style="{width: item.progress + '%'}"></view>
              </view>
              <text class="progress-text">{{ item.progress }}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-if="workList.length === 0">
      <text class="empty-text">暂无重点工作</text>
    </view>
  </view>
</template>

<script>
import { workApi, utils } from '@/utils/api-simple.js'

export default {
  data() {
    return {
      workList: [],
      loading: false,
      refreshing: false,
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // 筛选参数
      status: 'all',
      title: '',
      department: ''
    }
  },
  onLoad() {
    this.loadWorkList()
  },
  onShow() {
    console.log('重点工作页面显示，刷新数据')
    this.refreshData()
  },
  onTabItemTap() {
    console.log('重点工作 tab 点击，刷新数据')
    this.refreshData()
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  onReachBottom() {
    this.loadMore()
  },
  methods: {
    // 加载重点工作列表
    async loadWorkList(refresh = false) {
      if (this.loading) return
      
      this.loading = true
      
      try {
        const params = {
          pageNum: refresh ? 1 : this.pageNum,
          pageSize: this.pageSize,
          status: this.status,
          title: this.title,
          department: this.department
        }
        
        const response = await workApi.getWorkList(params)
        
        if (response.code === 200) {
          const list = response.rows || []
          
          // 处理图片数据
          const processedList = list.map(item => ({
            ...item,
            images: this.parseImages(item.images)
          }))
          
          if (refresh) {
            this.workList = processedList
            this.pageNum = 1
          } else {
            this.workList = [...this.workList, ...processedList]
          }
          
          this.total = response.total || 0
        }
      } catch (error) {
        console.error('加载重点工作列表失败:', error)
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
        this.refreshing = false
        uni.stopPullDownRefresh()
      }
    },
    
    // 刷新数据
    refreshData() {
      this.refreshing = true
      this.pageNum = 1
      this.loadWorkList(true)
    },
    
    // 加载更多
    loadMore() {
      if (this.workList.length >= this.total) {
        return
      }
      this.pageNum++
      this.loadWorkList()
    },
    
    // 处理图片数据
    parseImages(images) {
      if (!images) return []
      if (Array.isArray(images)) {
        return images.map(url => utils.getImageUrl(url))
      }
      if (typeof images === 'string') {
        return utils.parseImageUrls(images).map(url => utils.getImageUrl(url))
      }
      return []
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'pending': '未开始',
        'processing': '进行中',
        'completed': '已完成'
      }
      return statusMap[status] || '未知'
    },
    
    // 预览图片
    previewImage(images, current) {
      if (!images || images.length === 0) return
      
      uni.previewImage({
        urls: images,
        current: current,
        fail: (err) => {
          console.log('图片预览失败:', err)
          uni.showToast({
            title: '图片预览失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 筛选工作
    filterWork(status) {
      this.status = status
      this.refreshData()
    },
    
    // 搜索工作
    searchWork() {
      this.refreshData()
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.work-list {
  background-color: white;
  border-radius: 12rpx;
  overflow: hidden;
}

.list-header {
  background-color: #4CAF50;
  padding: 20rpx 30rpx;
}

.list-title {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
}

.work-item {
  border-bottom: 1rpx solid #f0f0f0;
  padding: 30rpx;
}

.work-item:last-child {
  border-bottom: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.serial-number {
  font-size: 28rpx;
  color: #666;
  font-weight: bold;
}

.work-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: white;
}

.work-status.pending {
  background-color: #ff9800;
}

.work-status.processing {
  background-color: #2196F3;
}

.work-status.completed {
  background-color: #4CAF50;
}

.item-content {
  
}

.work-title {
  margin-bottom: 20rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.work-description {
  margin-bottom: 25rpx;
}

.desc-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.desc-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  text-align: justify;
}

.work-details {
  background-color: #f8f9fa;
  padding: 20rpx;
  border-radius: 8rpx;
}

.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  min-width: 140rpx;
}

.detail-value {
  font-size: 26rpx;
  color: #666;
  flex: 1;
}

.progress-bar {
  flex: 1;
  height: 12rpx;
  background-color: #e0e0e0;
  border-radius: 6rpx;
  margin: 0 15rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #45a049);
  border-radius: 6rpx;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 24rpx;
  color: #4CAF50;
  font-weight: bold;
  min-width: 60rpx;
  text-align: right;
}

.empty-state {
  text-align: center;
  padding: 100rpx 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 图片展示样式 */
.work-images {
  margin-bottom: 25rpx;
}

.images-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.image-item {
  width: 140rpx;
  height: 140rpx;
  border-radius: 8rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.image-item:active {
  transform: scale(0.95);
}

.work-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}
</style>
